<template>
  <div>
    <div class="title">账户管理/修改密码</div>
    <div class="well">
      <a-from :form="form" @submit="handleSubmit">
        <a-form-item label="原密码" :label-col="{ span: 5 }" :wrapper-col="{ span: 6 }">
          <a-input type="password" v-decorator="['password', {rules: [{ required: true, message: '请输入原密码' }]}]">

          </a-input>
        </a-form-item>
        <a-form-item label="新密码" :label-col="{ span: 5 }" :wrapper-col="{ span: 6 }">
          <a-input type="password" @change="newPasswordChange" v-decorator="['newPassword', {rules: [{ required: true, message: '请设置新密码'}]}]"></a-input>
          <div class="check">
            <span class="icon" :class="lengthPassed && 'passed'"></span>
            <span class="text">密码长度需6-20位</span>
            <div class="clear"></div>
          </div>
          <div class="check">
            <span class="icon" :class="regPassed && 'passed'"></span>
            <span class="text">须包含数字、字母、符号中至少2种元素</span>
            <div class="clear"></div>
          </div>
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
          <div style="color:red" v-if="!(lengthPassed && regPassed)">{{errorTips}}</div>
          <div style="color:red" v-if="nbsp">{{nbspErrorTips}}</div>
          <div style="color:red" v-if="errorText">{{errorText}}</div>
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
          <a-button type="primary" html-type="submit">提交修改</a-button>
        </a-form-item>
      </a-from>
    </div>
  </div>
</template>
<script>
export default {
  name: 'ChangePwd',
  data () {
    return {
      errorTips: '',
      errorText: '',
      nbspErrorTips: '',
      nbsp: false,
      lengthPassed: false,
      regPassed: false,
      formLayout: 'horizontal',
      form: this.$form.createForm(this)
    }
  },
  methods: {
    newPasswordChange (e) {
      this.errorText = ''
      let value = e.target.value
      this.lengthPassed = (value.length >= 6 && value.length <= 20)
      this.regPassed = /(?!^[0-9]+$)(?!^[A-z]+$)(?!^[^A-z0-9]+$)^.{6,20}$/.test(value)
      this.nbsp = !!/\s/.exec(value)

      // if (!!/\s/.exec(value)) {
      //   this.nbspErrorTips = '密码格式错误'
      // }
    }
  }
}
</script>
<style lang="less" scoped>
.title {
  background: white;
  height: 48px;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 48px;
  padding-left: 32px;
}
.check {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.25);
  .icon {
    display: block;
    float: left;
    margin-top: 13px;
    width: 12px;
    height: 12px;
    background-image: url('../../assets/img/icon_password_normal.png');
    background-size: 100% 100%;
    &.passed {
      background-image: url("../../assets/img/icon_password_selected.png")
    }
  }
}
</style>
